import React, { useState } from 'react';
import { Card, Table, Button, Space, Tag, Input, Select, Tree } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { DirectoryTree } = Tree;

const Surgery: React.FC = () => {
  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);

  const treeData = [
    {
      title: '1.神经系统手术',
      key: '01',
      children: [
        {
          title: '1.1 颅骨和颅内手术',
          key: '01.01',
          children: [
            {
              title: '颅骨切开和切除',
              key: '01.01.01',
            },
            {
              title: '脑组织切除',
              key: '01.01.02',
            },
          ],
        },
        {
          title: '1.2 脊椎和脊髓手术',
          key: '01.02',
        },
      ],
    },
    {
      title: '2.内分泌系统手术',
      key: '02',
      children: [
        {
          title: '2.1 甲状腺和甲状旁腺手术',
          key: '02.01',
        },
        {
          title: '2.2 肾上腺手术',
          key: '02.02',
        },
      ],
    },
  ];

  const columns = [
    {
      title: '手术编码',
      dataIndex: 'code',
      key: 'code',
      width: 120,
    },
    {
      title: '手术名称',
      dataIndex: 'name',
      key: 'name',
      width: 250,
    },
    {
      title: '英文名称',
      dataIndex: 'englishName',
      key: 'englishName',
      width: 250,
    },
    {
      title: '手术分类',
      dataIndex: 'category',
      key: 'category',
      width: 150,
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
      width: 80,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 80,
      render: (status) => {
        const color = status === '启用' ? 'green' : 'red';
        return <Tag color={color}>{status}</Tag>;
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>查看详情</a>
          <a>编辑</a>
        </Space>
      ),
    },
  ];

  const data = [
    {
      key: '1',
      code: '01.01.01.001',
      name: '开颅探查术',
      englishName: 'Craniotomy for exploration',
      category: '颅骨切开和切除',
      version: 'v1.0',
      status: '启用',
    },
    {
      key: '2',
      code: '01.01.01.002',
      name: '开颅血肿清除术',
      englishName: 'Craniotomy for evacuation of hematoma',
      category: '颅骨切开和切除',
      version: 'v1.0',
      status: '启用',
    },
    {
      key: '3',
      code: '01.01.02.001',
      name: '脑叶切除术',
      englishName: 'Cerebral lobectomy',
      category: '脑组织切除',
      version: 'v1.0',
      status: '启用',
    },
    {
      key: '4',
      code: '01.01.02.002',
      name: '脑肿瘤切除术',
      englishName: 'Excision of brain tumor',
      category: '脑组织切除',
      version: 'v1.0',
      status: '启用',
    },
    {
      key: '5',
      code: '01.02.01.001',
      name: '椎板切除术',
      englishName: 'Laminectomy',
      category: '脊椎和脊髓手术',
      version: 'v1.0',
      status: '启用',
    },
  ];

  return (
    <div className="surgery-container">
      <Card bordered={false} title="手术与操作编码">
        <div className="surgery-layout">
          <div className="category-panel">
            <div className="panel-header">
              <div className="search-box">
                <Input.Search placeholder="搜索分类" allowClear />
              </div>
            </div>
            <div className="tree-container">
              <DirectoryTree
                defaultExpandAll
                onSelect={(keys) => setSelectedCategory(keys[0] as string)}
                treeData={treeData}
              />
            </div>
          </div>
          <div className="code-panel">
            <div className="table-top">
              <Space>
                <Button type="primary" icon={<PlusOutlined />}>
                  新增手术码
                </Button>
                <Select defaultValue="all" style={{ width: 120 }}>
                  <Option value="all">全部状态</Option>
                  <Option value="enabled">启用</Option>
                  <Option value="disabled">禁用</Option>
                </Select>
              </Space>
              <Input.Search
                placeholder="请输入编码/名称"
                allowClear
                enterButton="搜索"
                style={{ width: 300 }}
              />
            </div>
            <Table
              columns={columns}
              dataSource={data}
              pagination={{
                pageSize: 10,
                showSizeChanger: true,
                showQuickJumper: true,
                showTotal: (total) => `共 ${total} 条`,
              }}
            />
          </div>
        </div>
      </Card>
    </div>
  );
};

export default Surgery; 
